<template>
	<div class="relative w-full h-full flex-c">
		<div class="absolute top-0 left-0 z-0">
			<Particles
				id="tsparticles"
				class="login__particles"
				:options="particles"
			/>
		</div>
		<div class="absolute top-0 left-0 z-10 w-full h-full flex-c">
			<div
				class="p-5 text-black bg-white w-[20vw] text-center opacity-80 rounded-lg py-10"
			>
				<form-vue v-bind="form" ref="loginForm"></form-vue>
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { particles } from './config/particles.ts';
import FormVue from '@/components/form/Form.vue';
import LoginForm from './config/loginForm';

let loading: any = null;
const openFullScreen = () => {
	loading = ElLoading.service({
		lock: true,
		text: 'loading...',
		background: 'rgba(0, 0, 0, 0.7)',
	});
};
const loginForm = ref<typeof FormVue>();
const router = useRouter();
const model = reactive({
	username: 'admin',
	password: '123456',
});
const form = {
	model,
	component: {
		labelWidth: '10px',
	},
	events: {
		// validate: () => console.log(arguments),
	},
	fields: [
		...LoginForm,
		{
			name: 'el-button',
			slot: {
				text: '登录',
			},
			component: {
				type: 'primary',
				size: 'small',
				style: { width: '100%' },
			},
			events: {
				click: () => {
					console.log('loginForm:', loginForm);
					loginForm.value!.$refs.form.validate(async (valid: boolean) => {
						if (!valid) {
							return;
						}
						try {
							openFullScreen();
							setTimeout(() => {
								loading.close();
								router.replace('/');
								ElMessage({
									type: 'success',
									message: '验证成功！',
								});
							}, 3000);
						} catch (error) {
							loading.close();
							ElMessageBox({
								title: '错误',
								message: '账号或密码错误！',
							});
						}
					});
				},
			},
		},
	],
};
</script>
